<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态组件</title>
    <script src="../../vue2.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul li {
            list-style: none;
        }

        #box {
            width: 500px;
            height: 100vh;
            border: 1px solid gray;
            box-sizing: border-box;
            position: relative;
        }

        ul {
            width: 100%;
            height: 60px;
            background-color: skyblue;
            position: absolute;
            bottom: 0;
            left: 0;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        ul li {
            flex: 1;
            text-align: center;
        }

        ul .active {
            color: orange;
        }
    </style>
</head>
<body>
<div id="box">

    <!--    <home v-show="which === 'home'"></home>-->
    <!--    <list v-show="which === 'list'"></list>-->
    <!--    <shopcar v-show="which === 'shopcar'"></shopcar>-->

    <keep-alive>                              <!--  keep-alive: 保持存活  -->
        <component :is="which"></component>   <!--  component自定义组件名，is=什么，这个组件名就是什么  -->
    </keep-alive>

    <ul>
        <li @click="which='home'" :class="which === 'home'?'active':''">首页</li>
        <li @click="which='list'" :class="which === 'list'?'active':''">列表</li>
        <li @click="which='shopcar'" :class="which === 'shopcar'?'active':''">购物车</li>
    </ul>

</div>
<script>
    Vue.component("home", {
        template: `<div>
            home
            <input type="text">
        </div>`
    })

    Vue.component("list", {
        template: `<div>
            list
        </div>`
    })

    Vue.component("shopcar", {
        template: `<div>
            shopcar
        </div>`
    })

    new Vue({
        el: "#box",
        data: {
            mydata: true,
            which: "home"
        }
    })
</script>
</body>
</html>